<template>
  <n-spin :show="loading">
    <n-card content-style="padding: 6px 16px;" style="margin-top: 20px;">
      <n-list>
        <n-list-item>
          <n-thing title="版本信息" description="4.1.1.19" />
          <template #suffix>
            <n-button strong secondary size="small" @click="handleCheckUpdate">检查更新</n-button>
          </template>
        </n-list-item>
      </n-list>
    </n-card>
  </n-spin>

  <n-card content-style="padding: 6px 16px;" style="margin-top: 20px;">
    <n-list>
      <n-list-item>
        <n-thing title="微信帮助" />
        <template #suffix>
          <n-button strong secondary size="small" @click="handleHelp">查看帮助</n-button>
        </template>
      </n-list-item>
    </n-list>
  </n-card>
</template>

<script setup>
import { ref } from "vue";
import { openUrl } from "@tauri-apps/plugin-opener";
import { message } from '@tauri-apps/plugin-dialog';

const loading = ref(false);

// 检查更新
const handleCheckUpdate = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    message('当前已是最新版本！', {
      title: '提示',
      kind: 'info'
    });
  }, 1000)
}

// 查看帮助
const handleHelp = () => {
  openUrl('https://www.baidu.com')
}
</script>

<style lang="scss" scoped>
@use "@/assets/css/n-list-reset.scss";
</style>

